<template>
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column
      prop="id"
      label="ID"
      width="80"
    />
    <el-table-column
      prop="name"
      label="姓名"
    />
    <el-table-column
      prop="age"
      label="年龄"
      width="100"
    />
    <el-table-column
      prop="address"
      label="地址"
    />
  </el-table>
  <el-button @click="toW2"> params跳转到w2路由 </el-button>
  <el-button @click="toW3"> query跳转到w3路由 </el-button>
  <el-button @click="toW4"> 跳转不带参到w4路由mitt事件总线传参 </el-button>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import emitter from "../../utils/eventBus";
import { storage } from "./localStorge";
//用于路由跳转等操作
const router = useRouter();
interface User {
  id: number;
  name: string;
  age: number;
  address: string;
}
const tableData = ref<User[]>([
  { id: 1, name: "张三", age: 28, address: "北京市朝阳区" },
  { id: 2, name: "李四", age: 32, address: "上海市浦东新区" },
  { id: 3, name: "王五", age: 24, address: "广州市天河区" },
  { id: 4, name: "赵六", age: 30, address: "深圳市南山区" },
  { id: 5, name: "钱七", age: 26, address: "杭州市西湖区" },
]);

//定义传参的参数类型
interface para {
  id: String;
}
//传参给w2 回显
const toNextData = ref<para>({
  id: "John",
});
//跳转路由 params  params和name对应，而不是path
//目的路由中接收不到params 的原因是 路由配置 未在路由配置中定义参数占位符 /:id  对应参数id
//name对应router.js中路由配置的name,path对应path
const toW2 = () => {
  router.push({
    name: "w2",
    params: {
      id: toNextData.value.id,
    },
  });
};
//跳转路由 query
//name对应router.js中路由配置的name,path对应path
const toW3 = () => {
  router.push({
    name: "w3",
    query: {
      id: toNextData.value.id,
    },
  });
};
//通过Vue3 事件总线传参
//name对应router.js中路由配置的name,path对应path
const toW4 = () => {
  //mitt 事件总线传参
  // emitter.emit("send", {
  //     id: "123456"
  // })
  storage.set("userId", 123);
  router.push({
    name: "w4",
  });
};
</script>
